<!--
 * @Author: lihaonan lihaonan@eiiplat.com
 * @Date: 2024-01-28 17:09:20
 * @LastEditors: 毕晨曦 
 * @LastEditTime: 2024-07-31 23:32:40
 * @FilePath: \xueyuan\src\Layout\xiaoxi.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { shallowRef, ref, reactive } from "vue";
import { userStore } from "@/store";
import { getMessageList, getMessagePolling } from "@/api/xiaoxi";
import { onShow, onReachBottom, onLoad } from "@dcloudio/uni-app";
const IMG_URL = import.meta.env.VITE_BASE_URL_IMG;
onLoad((option) => {
  if (!option) return;
  list.value = JSON.parse(decodeURIComponent(option.data));
  list.value.forEach((item: { avatar: string }) => {
    item.avatar = IMG_URL + item.avatar;
  });
  uni.setNavigationBarTitle({
    title: option.name,
  });
});

function jumpMeessage(item) {
  uni.navigateTo({
    url: `/pages/message/index?id=${item.nid}`,
  });
}

const user = userStore();
const tabStatus = shallowRef(0);
const lastId = shallowRef();
const status = shallowRef("loadmore");
const list = ref();
// 触底刷新
onReachBottom(() => {
  status.value = "loading";
  lastId.value =
    list.value[tabStatus.value][list.value[tabStatus.value].length - 1].id;
  status.value = "loadmore";
});

onShow(() => {});
</script>

<template>
  <view class="vh-100 index">
    <view
      class="item"
      @click="jumpMeessage(i)"
      v-for="(i, index) in list"
      :key="index"
    >
      <image
        class="ava"
        v-if="i.avatar"
        :src="i.avatar"
        mode="aspectFill"
      ></image>
      <!-- <u-badge customStyle="margin-left:11%;margin-bottom: 10%;" style="margin-bottom: ;"
            v-if="i.unreadCount !== null ||" max="99" :value="i.unreadCount" :absolute="true">
          </u-badge> -->
      <view class="r">
        <view class="title">
          <text class="name">{{ i.nickName }}</text>
          <text class="time">{{ i.createTime.slice(0, 10) }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<style>
.u-tabs {
  background: #fff;
}

.u-swipe-action-item {
  border-radius: 24rpx;
  margin: 40rpx 20rpx;
}

.u-line-1 {
  font-size: 10px !important;
  line-height: 15px !important;
}
</style>
<style lang="scss" scoped>
.index {
  background-color: rgb(245, 245, 245);
  position: relative;
}
.item {
  height: 100rpx;
  background: #ffffff;
  padding: 30rpx;
  display: flex;
  margin-top: 20rpx;
  justify-content: space-between;
  align-items: center;
  border-radius: 24rpx;
  overflow: hidden;

  .ava {
    width: 102rpx;
    height: 102rpx;
    border-radius: 50%;
    background-size: 100% 100%;

    .u-badge {
      left: 95rpx;
    }
  }

  .r {
    width: 637rpx;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-left: 20rpx;

      .name {
        width: 420rpx;
        height: 80rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 32rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #333333;
      }

      .time {
        font-size: 24rpx;
        height: 80rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #c9c9d0;
      }
    }

    .msg {
      width: 100%;
      margin-left: 20rpx;
      margin-top: 20rpx;
      font-size: 28rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #434343;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.loadmore {
  position: absolute;
  bottom: 20rpx;
  left: 330rpx;
}
</style>
